import React, { useState, useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom';
import './index.less';

export default function Header({ title, record, confirm }: { title: string; record: boolean; confirm: boolean }) {
    const [navState, setNavState] = useState(false);
    const nodeRef = useRef(null);

    return (
        <>
            <header className='header-container'>
                <span
                    className='header-slide-icon icon-catalog'
                    onClick={() => {
                        setNavState((navState) => !navState);
                    }}
                />
                <span className='header-title'>{title}</span>
                {record && <Link to='/record/passed' className='header-link icon-jilu' />}

                {confirm && (
                    <Link to='/' className='header-link header-link-confim'>
                        确定
                    </Link>
                )}
            </header>
            <CSSTransition unmountOnExit in={navState} nodeRef={nodeRef} classNames='fade' timeout={500}>
                <div ref={nodeRef} className='button-container'>
                    <aside className='nav-slide-list btn'>
                        <Link to='/home' className='nav-link icon-jiantou-copy-copy'>
                            首页
                        </Link>
                        <Link to='/balance' className='nav-link icon-jiantou-copy-copy'>
                            提现
                        </Link>
                        <Link to='/userinfo' className='nav-link icon-jiantou-copy-copy'>
                            用户信息
                        </Link>
                    </aside>
                </div>
            </CSSTransition>
        </>
    );
}
